// src/stores/header.ts
import { defineStore } from 'pinia';
import { ref } from 'vue';

interface HeaderState {
  index: number;
  buttonStates: boolean[];
}

export const useHeaderStore = defineStore('header', () => {
  const index = ref<number>(0); // 当前选中的按钮索引
  const buttonStates = ref<boolean[]>([true, false, false, false, false, false]); // 初始状态，所有按钮都未选中

  const setButtonState = (i: number, isSelected: boolean) => {
    // 如果点击的按钮已经是当前选中的按钮，则不执行任何操作
    if (i === index.value) return;
    // 重置所有按钮状态为 false
    buttonStates.value = buttonStates.value.map(() => false);
    // 设置指定按钮的状态为 true
    buttonStates.value[i] = isSelected;
    // 设置当前索引
    if (i !== 3) {
      index.value = i;
    }
    switch (i) {
      case 0:
        // 处理按钮 0 的逻辑
        break;
      case 1:
        // 处理按钮 1 的逻辑
        break;
      case 2:
        // 处理按钮 2 的逻辑
        break;
      case 3:
        window.open('http://100.90.131.99:30980/', '_blank');
        break;
    }
  };

  const toggleButton = (index: number) => {
    // 切换按钮状态
    setButtonState(index, !buttonStates.value[index]);
  };

  const selectIndex = computed(() => {
    return index.value;
  });
  return {
    index,
    buttonStates,
    selectIndex,
    setButtonState,
    toggleButton
  };
});
